<template>
<!-- <ImportFile url="/contacts/maintenance/import" text="数据导入" v-auth:contact:manageImport ></ImportFile> -->
    <div class="import-file">
        <input type="file" class="file-ipt" ref="fileIpt"  @click.stop="" @change="fileChange" :accept="accept" >
        <div @click.stop="handleImport()" class="content-bux">
            <a-button slot="content" type="primary" :icon="icon" :loading="loading">{{text}}</a-button>
        </div>
    </div>
</template>

<script>
// import { httpPost } from "@/appBase/request";
import { basePost } from '@/api/common';

export default {
    name: "ImportFile",
    props: {
        url: {
            type: String,
            required: true,
        },
        text: {
            type: String,
            default: () => '文件导入',
        },
        icon: {
            type: String,
            default: () => 'plus',
        },
        accept: {
            type: String,
            default: () => ".xlsx,.xls",
        },
        // 上传时额外的参数
        param: {
            type: Object,
            default: () => null,
        },
    },
    data() {
        return {
            loading: false,
        };
    },
    created() {},
    methods: {
        // 点击上传
        handleImport() {
            if (this.loading) {
                return;
            }
            this.$refs.fileIpt.click();
        },
        // 文件改变事件
        fileChange(e) {
            const { files } = e.target;
            if (files) {
                this.upload(files[0]);
            }
            e.target.value = null;
        },
        // 上传
        upload(file) {
            this.loading = true;
            const reqParam = new FormData(); // 创建form对象
            reqParam.append('file', file); // 通过append向form对象添加数据
            if (this.param !== null) {
                const keys = Object.keys(this.param);
                let key;
                for (let i = 0; i < keys.length; i += 1) {
                    key = keys[i];
                    reqParam.append(key, this.param[key]);
                }
            }
            basePost(this.url, reqParam).then((data) => {
                // data 为空则成功
                if (data === null || data.length === 0) {
                    this.$message.success('导入成功');
                    this.$emit('success', res);
                } else {
                    this.$notification.error({
                        message: '导入失败',
                        description: () => {
                            const pArr = [];
                            data.forEach((item) => {
                                pArr.push(<p>{item}</p>);
                            });
                            return (pArr);
                        },
                    });
                    this.$emit('error', res);
                }
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            });
        },
  },
};
</script>
<style lang="less">
    .import-file {
        display: inline-block;
        position: relative;
        .file-ipt {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        .content-box {
            display: inline-block;
        }
    }
</style>